<template>
<div>
  <div class="popup-mask" @click="closeIdcard"></div>
  <div class="address-fixed">
    <div class="close-btn" @click="closeIdcard"><i class="iconfont icon-shanchu"></i></div>
    <div class="address-box">
      <!-- 身份证审核通过 start -->
      <div class="address-uploaded" v-if="auditStatusData == 'PASSED'">
        <h2>身份证照片已上传！</h2>
        <p>为了保护您的隐私，无法查看已上传的照片，若要修改，请重新上传</p>
        <span @click="showUploadcard">重新上传</span>
      </div>
      <!-- 身份证审核通过 end -->
      
      <!-- 身份证审核中 start -->
      <div class="address-uploaded" v-else-if="auditStatusData == 'REIVEW'">
        <h2>身份证照片已上传！</h2>
        <p>您的照片正在审核中，为了保护您的隐私，无法查看已上传的照片。</p>
      </div>
      <!-- 身份证审核中 end -->

      <div class="address-dl" v-else>
        <dl>
          <dt @click="chooseImage('idcardfront')">
            <img :src="idcardfront" />
            </dt>
          <dd>身份证正面</dd>
	    	</dl>
        <dl>
          <dt @click="chooseImage('idcardback')">
            <img :src="idcardback" />
          </dt>
          <dd>身份证反面</dd>
        </dl>

        <ul>
          <li><i></i> <p>示例</p></li>
          <li><i class="inverse"></i> <p>示例</p></li>
        </ul>
      </div>
    </div>
    <div class="address-tip">
        <h2>为什么需要实名认证？</h2>
        <p><b>·</b>根据海关总署令第147号第22条规定，海外直购必须提供收货人身份证正反面照片，为避免清关受到影响，请上传真实有效的收货人身份证照片。</p>
        <p><b>·</b>您的身份证图片在上传成功后将自动添加报关水印、所有信息均进行加密存储，直接提交给海关，仅用作清关时查验。
        <a href="../h5webView/main?pageUrl=http://app.fashionfinger.com/ssfk/html/static/identity.html&pageTitle=身份证使用说明">查看海关政策及更多帮助</a></p>
    </div>

  </div>
</div>
</template>

<script>
export default {
  props:["auditStatusData"],
  data () {
    return {
      idcardfront:'',
      idcardback:''
    }
  },
  methods: {
     chooseImage(main) {
      var _this = this;
      wx.chooseImage({
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          if(main == 'idcardfront'){
            _this.idcardfront = res.tempFilePaths.join('')
          } else{
            _this.idcardback = res.tempFilePaths.join('')
          }
          const tempFilePaths = res.tempFilePaths
          _this.upload(tempFilePaths[0],main)
        }
      })
    },
    upload(tempFile,main){
        this.$fly.uploadFile(this.$url.URL_UPLOADIDCARD+'?access_token='+ this.$wx.getToken(),tempFile,(res)=>{
            var path = JSON.parse(res.data).data.path;
            this.$emit('receiveIdcard', path, main)
        })
    },
    closeIdcard(){
      this.$emit('receiveCloseIdcard')
    },
    showUploadcard(){
      this.auditStatusData = 'UNPASS'
    }
  }
}
</script>

<style>
.address-fixed{position: fixed; left:0; right:0; bottom:0; background: #fff; z-index: 99}
.address-fixed .close-btn{top:0; right:10px; position: absolute}
.address-fixed .close-btn i{font-size: 26px}

.address-box{margin-top:6%; padding:6% 0; background: #fff; border-bottom:1px #f2f2f2 solid}
.address-dl{width:100%; overflow: hidden;}
.address-dl dl{ text-align: center; float:left; width:50%}
.address-dl dl dt{width:128px; height:81px; background:url(../assets/images/identifyId.jpg); background-size:256px 81px; display: inline-block; position: relative;}
.address-dl dl dt.back-dt{background-position: -128px 0}
.address-dl dl dt .filePicker{position: absolute; top:0; left:0;width:128px; height:81px;}
.address-dl dl dt .preview-pic{position: absolute; top:0}
.address-dl dl dt .percent{position: absolute; top:0; width:128px; height:81px; line-height: 81px; text-align: center; z-index: 9; color:#fff; text-shadow: #000 0 1px 2px;}
.address-dl dl dt img{width:128px; height:81px;}
.address-dl ul{margin-top:3%; float: left; width:100%}
.address-dl ul li{width: 50%; text-align: center; float: left}
.address-dl ul li i{width: 90px; height:60px; display: inline-block; background: url(http://ssfk-media01.oss-cn-shenzhen.aliyuncs.com/user/10002/1540785946858/add-identity.jpg); background-size:  90px 120px}
.address-dl ul li i.inverse{background-position: 0 -60px}
.address-dl ul li p{display: block; line-height: 1.2em; color: #999; font-size: .8em}

.address-tip{padding:2% 4%; background-color: #fff; border-bottom:1px #f2f2f2 solid}
.address-tip h2{text-align: center; font-weight: bold;}
.address-tip p{padding: 4px 0; color: #868080; font-size: .9em; line-height: 1.3em}
.address-tip p b{font-size: 1.5em; display: inline-block}
.address-tip p a{color: #ff4545; font-size: .9em;}

.address-uploaded{padding:0 4%; text-align: center;}
.address-uploaded h2{font-weight: bold}
.address-uploaded p{text-align: left; color: #6b615f; font-size: .9em; padding: 2% 0}
.address-uploaded span{padding:4px 14px; border:1px #c9c5c6 solid; font-size:.9em; font-weight: bold; margin-top:10px; display: inline-block;}
.address-uploaded span:active{border-color: #000}
</style>
